<template>
  <div>
    <div v-show="!showEdit&&!showAdd">
      <search-form
        :search-config="searchConfig"
        :label-width="150"
        @clear="clearSearch"
        @search="handleSearch"
      />
      <table-box
        ref="refTable"
        table-size="mini"
        :table-config="tableConfig"
        show-selection
        dragable
        :selected-arry.sync="tableSelected"
        :other-filters="otherFilters"
        @btnOperate="btnOperate"
        @selection-change="selectionChangeHandle"
      />
    </div>
    <edit-form v-if="showEdit" :is-detail="isDetail" :detail-data="activeData" :page-show.sync="showEdit" @success="refreshTable" />
    <add v-if="showAdd" :detail-data="activeData" :page-show.sync="showAdd" @success="refreshTable" />
    <export-files
      v-if="exportVisible"
      title="导出"
      :config="exportConfig"
      :visible.sync="exportVisible"
    />
  </div>
</template>
<script>
import editForm from './Edit.vue'
import add from './Add.vue'
export default {
  name: 'OrderSearch',
  components: { editForm, add },
  props: {},
  data() {
    return {
      tableSelected: [],
      showEdit: false,
      showAdd: false,
      exportVisible: false,
      isDetail: false,
      activeData: {},
      otherFilters: [], // { 'id': 'isEnd', 'property': 'isEnd', 'operator': '=', 'value': '0' }
      searchConfig: [
        { label: '订单编号', prop: 'orderCode', type: 'text', placeholder: '', filter: true },
        { label: '配图任务编号', prop: 'taskCode', type: 'text', placeholder: '', filter: true },
        { label: '门店名称', prop: 'shopName', type: 'text', placeholder: '', filter: true },
        { label: 'CRM下单时间', prop: 'orderTime', type: 'date', placeholder: '', filter: true },
        { label: 'CRM确图时间', prop: 'confirmTime', type: 'date', placeholder: '', filter: true }

      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/autonomyDesign/crmPage`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        apiHeader: {
          'Permission-perCode': 'order_search',
          'Permission-App': 'slm'
        },
        order: 'desc',
        // sort: 'createTime',
        // 表格字段动态配置
        setting: [
          {
            prop: 'orderCode',
            label: '订单编号',
            minWidth: '140',
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'serialCode',
            label: '工单流水号',
            minWidth: '120'
          },
          {
            prop: 'taskCode',
            label: '配图任务编号',
            minWidth: '160'
          },
          {
            prop: 'shopCode',
            label: '门店编码',
            minWidth: '140'
          },
          {
            prop: 'shopName',
            label: '门店名称',
            minWidth: '140'
          },
          {
            prop: 'orderTime',
            label: 'CRM下单时间',
            minWidth: '140'
          },
          {
            prop: 'confirmTime',
            label: 'CRM确图时间',
            minWidth: '140'
          },
          {
            prop: 'quotationTime',
            label: '商家确认报价时间',
            minWidth: '140'
          },
          {
            prop: 'remark',
            label: '备注',
            minWidth: '140'
          },
          {
            prop: 'unLockTime',
            label: 'SAP解锁时间',
            minWidth: '140'
          },
          // 配图任务进度、复尺确认时间、复尺确认备注、是否可解锁
          {
            prop: 'drawingSchedule',
            label: '配图进度',
            minWidth: '125',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SLM_DRAWING_PROGRESS'
            }
          },
          {
            prop: 'rulerConfirmTime',
            label: '复尺确认时间',
            minWidth: '140'
          },
          {
            prop: 'rulerConfirmRemark',
            label: '复尺确认备注',
            minWidth: '140'
          },
          {
            prop: 'isLock',
            label: '是否可解锁',
            minWidth: '140',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          // {
          //   prop: 'todo',
          //   label: '订单异常',
          //   propEnum: {
          //     domainCode: 'marketing',
          //     appCode: 'slm',
          //     dictTypeCode: 'ACTUAL_PROCESS_RESULT'
          //   },
          //   minWidth: '100'
          // },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: '90'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: '130'
          }
        ],
        btnList: this.isProduction ? null : [{
          buttonName: '新增',
          outerFlag: true,
          optCode: 'add'
        },
        {
          buttonName: '编辑备注',
          outerFlag: true,
          optCode: 'edit'
        },
        {
          buttonName: '导出',
          outerFlag: true,
          optCode: 'export'
        }]
      }
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '订单crm',
        dataApi: '/slm-admin/api/v1/autonomyDesign/crmExport/?type=0',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        headers: { 'Permission-perCode': 'order_search' },
        filtersRaw: this.otherFilters,
        queryField: 'id'
      }]
    }
  },
  created() {

  },
  methods: {
    // 清空搜索数据
    clearSearch() {
    },
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      const filterArr = this.tableSelected.filter(item => item.id === row.id)
      return filterArr.length > 0 ? 'selected-highlight' : ''
    },
    refreshTable(flag) {
      this.$refs.refTable.initTableData(!!flag)
    },
    // 获取搜索条件
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    // 新增/编辑
    handleEdit(data) {
      this.activeData = data
      this.showEdit = true
      this.isDetail = false
    },
    handleAdd() {
      this.activeData = {}
      this.showAdd = true
    },
    handleDetail(data) {
      if (data && data.id) {
        this.activeData = data
        this.showEdit = true
        this.isDetail = true
      }
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    },
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleAdd()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'export':
          this.exportVisible = true
          break

        default:
          break
      }
    }
  }
}
</script>
